let box = document.querySelector(".box")

isLeapYear = function (year){
    return (year % 4 === 0 && year % 100 !==0 && year % 400 !== 0) || (year % 100 === 0 && year % 400 === 0)
}

getFebDay = function (year){
    return isLeapYear(year) ? 29 : 28
}

const month_name = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']

let month_picker = document.querySelector("#month_picker")

month_picker.onclick = function(){
    month_list.classList.add("show")
}

generateBox = function(month,year){
    let box_days = document.querySelector(".box_days")
    box_days.innerHTML = ``
    let box_header_year = document.querySelector("#year")
    let days_of_month = [31,getFebDay(year),31,30,31,30,31,31,30,31,30,31]

    
    let currDate = new Date()
    // if (!month) month = currDate.getMonth()
    // if (!year) year = currDate.getFullYear()

    // let curr_month = `${month_name[month]}`
    month_picker.innerHTML = month_name[month]
    box_header_year.innerHTML = year

    
    let first_day = new Date(year,month,1)
    for(let i = 0;i < days_of_month[month] + first_day.getDay() - 1;i++){
        let day = document.createElement("div")
        if(i >= first_day.getDay()){
            day.classList.add("box_day_hover")
            day.innerHTML = i - first_day.getDay() + 1
            day.innerHTML += `<span></span>
            <span></span>
            <span></span>
            <span></span>`
            if(i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() && month === currDate.getMonth()){
                day.classList.add("curr_date")
            }
        }
        box_days.appendChild(day)
    }
}

let month_list = document.querySelector(".month_list")

month_name.forEach(function(e,index){
    let month = document.createElement("div")
    month.innerHTML = `<div>${e}</div>`
    //点击切换月份
    month.onclick =function(){
        month_list.classList.remove("show")
        curr_month.value = index
        generateBox(curr_month.value,curr_year.value)
    }
    month_list.appendChild(month)
})


document.querySelector(".last").onclick = function(){
    --curr_year.value
    generateBox(curr_month.value,curr_year.value)
}
document.querySelector(".next").onclick = function(){
    ++curr_year.value
    generateBox(curr_month.value,curr_year.value)
}

let currDate = new Date()
let curr_month = {
    value:currDate.getMonth()
}
let curr_year = {
    value:currDate.getFullYear()
}
let curr_day = {
    value:currDate.getDate()
}

generateBox(curr_month.value,curr_year.value)

let arr = [
    {
        month:10,
        day:24,
        link:"./1024/homework.html"
    },
    {
        month:10,
        day:25,
        link:"./1025/homework.html"
    },
    {
        month:11,
        day:17,
        link:"./1117/homework.html"
    }
]


let box_days = document.querySelectorAll(".box_days")
document.querySelector(".box_days").onclick = function(){
    console.log(1);
}


box_days.forEach().addEventListener("onclick",arr.forEach(function(index){
        if(index.month === curr_month.value + 1){
            if(index.day === curr_day.value){
                let day = document.createElement("a")
                day.classList.add("box_day_hover")
                day.innerHTML = i - first_day.getDay() + 1
                day.innerHTML += `<div><span></span>
                <span></span>
                <span></span>
                <span></span></div>`
            }
        }
    })
)